<template>
    <div>
        <div class="header-search-a" v-if="!LookUpShow">
            <icon class="weui-icon-search_in-box" type="search" :size="iconSize"></icon>
            <div class="search-input" @click="searchFocus">大家都在搜:</div>
        </div>
        <div class="header-search-b" v-if="LookUpShow">
            <icon class="weui-icon-search_in-box" type="search" :size="iconSize"></icon>
            <input focus confirm-type="search" v-model="keyWord" @confirm="onSearch" class="search-input" type="text" placeholder="大家都在搜："/>
            <button class="search-input-btn" @click.stop="onSearch" v-if="keyWord==''?false:true">搜索</button>
            <button class="search-input-btn" @click.stop="searchBlur" v-if="keyWord==''?true:false">取消</button>
        </div>

        <div class="contain-lookup" v-if="LookUpShow" @click.stop="searchBlur">
            <div class="lookup-list" @click.stop>
                <div class="lookup-list-title">
                    <p class="list-title">搜索圈子</p>
                    <p class="list-more">更多></p>
                </div>
                <div class="lookup-list-null" v-if="LookUpList.length==0">未搜索到相关圈子</div>
                <div class="lookup-list-item" v-for="item in LookUpList" :key="item.id" v-if="LookUpList.length>0">
                    <div class="lookup-item-name" @click="skipLoop(item.id)">{{item.name}}</div>
                    <!--                        <button class="circle-follow" @click="followCircle(item.id)">关注</button>-->
                </div>
            </div>
            <div class="lookup-list" @click.stop>
                <div class="lookup-list-title">
                    <p class="list-title">搜索用户</p>
                    <p class="list-more">更多></p>
                </div>
                <div class="lookup-list-null" v-if="LookUpList.length==0">未搜索到相关圈子</div>
                <div class="lookup-list-item" v-for="item in LookUpList" :key="item.id" v-if="LookUpList.length>0">
                    <div class="lookup-item-name" @click="skipLoop(item.id)">{{item.name}}</div>
                    <!--                        <button class="circle-follow" @click="followCircle(item.id)">关注</button>-->
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "search",
        data(){
            return {
                iconSize: 14,
                keyWord: '',
                //查找
                LookUpShow:false,
                LookUpList:[],
            }
        },
        mounted(){
            uni.getSystemInfo({
                success: res => {
                    let windowWidth = res.windowWidth;
                    if (windowWidth>480){
                        this.iconSize = 32
                    }
                }
            })
        },
        methods:{
            //查找圈子
            onSearch(){
                this.searchCircle();
            },
            //搜索框对焦
            searchFocus(){
                this.LookUpShow = true;
            },
            searchBlur(){
                this.keyWord = '';
                this.LookUpList = [],
                this.LookUpShow = false;
            },
            //搜索圈子列表
            async searchCircle(){
                let params = {
                    keyword : this.keyWord,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.searchCircle(params);
                if (res.data.level == 'success'){
                    console.log(res.data.data)
                    this.LookUpList = res.data.data;
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //跳转圈子首页
            skipLoop(id){
                this.keyWord = '';
                this.LookUpList = [],
                this.LookUpShow = false;
                uni.navigateTo({
                    url: '/pages/circlebar/circlebarhome/circlebarhome?circle_id='+id
                })
            },
        },
        watch:{
            KeyList(newValue, oldValue){
                console.log(newValue)
                this.$emit('update:fatherValue',newValue)
            },
            fatherValue(newValue){
                this.KeyList = newValue
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>